<script lang="ts">
import axios from "axios";
export default {
  name: "Detail",
  data(){
    return {
      film:{},
      isLoading:true
    }
  },
  methods:{
    async getFilmInfo(filmId=this.$route.params.id){
      const {data} = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          filmId
        },
        headers:{
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1761639069258599980892161","bc":"110100"}',
          'X-Host': 'mall.film-ticket.film.info'
        }
      });
      this.isLoading = false;
      this.film = data.data.film;
    }
  },
  mounted() {
    this.getFilmInfo();
  },
  beforeRouteUpdate(to,from,next){
    this.getFilmInfo(to.params.id);
    next();
  }
}
</script>

<template>
  <div>
    <h3 v-if="isLoading">正在加载中.....</h3>
    <template v-else>
      <h3>{{film.name}}</h3>
      <p>{{film.synopsis}}</p>
      <img :src="film.poster" style="width: 200px">
    </template>

  </div>
</template>

<style scoped lang="less">

</style>
